<template>
	<div style="background: #f5f5f5;">
		<vhead></vhead>
		<div class="container" style="margin-top: 50px;">
			<div class="row">
				<div class="col-sm-9">
					<ol class="breadcrumb">
					      	<li>
					      		<router-link to="/home">首页</router-link>
					      	</li> 
					      	<li>
					      		<router-link to="/film">电影推荐</router-link>
					      	</li> 
					      	<li class="active">{{filmJson.filmName}}</li>
				    </ol>
					<div class="col-sm-3 col-xs-12">
						<img class="col-sm-12 col-xs-12" :src="filmJson.filmImgUrl"/>
					</div>
					<div class="col-sm-9 col-xs-12">
						<ul class="list-unstyled listFilm">
							<li>导演：{{filmJson.filmDirection}}</li>
							<li>编剧：{{filmJson.filmScreenWriter}}</li>
							<li>主演：{{filmJson.filmActer}}</li>
							<li>类型：</li>
							<li>国家：</li>
							<li>语言：</li>
							<li>上映：{{filmJson.filmDate}}</li>
							<li>片长：{{filmJson.filmLength}}</li>
						</ul>
					</div>
					<div class="col-sm-12 col-xs-12">
						<h4>
							『{{filmJson.filmName}}』电影简介
						</h4>
					</div>
					<div class="col-sm-12 col-xs-12" v-html="filmJson.filmSummary">
					</div>
					<div class="col-sm-12 col-xs-12">
						<h4>
							看过『{{filmJson.filmName}}』还喜欢
						</h4>
					</div>
					<div class="col-sm-12 col-xs-12">
						<div class="col-sm-3 col-xs-6" v-for="item in filmSomeJson" style="margin: 5px 0px;">
							<router-link :to="item.filmId | getFilmHref()">
							    <img class="col-sm-12 col-xs-12" style="height: 207px;" :src="item.imgUrl"  />
							</router-link>
						</div>
					</div>
					<div class="col-sm-12 col-xs-12"  style="margin-top: 10px;">
						<h4 class="col-sm-10 col-xs-12">『{{filmJson.filmName}}』的评论</h4>
						<p class="glyphicon glyphicon-pencil col-sm-2 col-xs-12 save-comment" @click="changeTalk()">留下足迹?</p>
					</div>
					
					<form v-if="showTalk" style="border: 1px solid #dfdfdf; padding: 10px; margin-top:10px ;" class="form-horizontal col-sm-12 col-xs-12"  action="" enctype="multipart/form-data" method="POST">
				  		<div class="form-group">
					    	<label class="col-sm-1 col-xs-2 control-label">昵称</label>
					    	<div class="col-sm-2 col-xs-10">
					      		<input type="text" v-model="comentName" class="form-control" placeholder="请输入昵称">
				    		</div>
				  		</div>
				  		<div class="form-group">
					    	<label class="col-sm-1  col-xs-2 control-label">内容</label>
					    	<div class="col-sm-11  col-xs-10">
					      		<textarea v-model="comentContent" style="resize:none"  class="form-control" rows="10" placeholder="请输入您想说的话吧！"></textarea>
				    		</div>
				  		</div>
					  	<div class="form-group">
					    	<div class="col-sm-offset-4  col-sm-4 col-xs-12">
					      		<a class="btn btn-info" @click="saveTalks()">保存</a>
					      		<a class="btn btn-info" @click="changeTalk()">取消</a>
					    	</div>
					  	</div>
					</form>
					
					<div class="col-sm-12 col-xs-12">
						<ul class="list-unstyled film-comment" id="filmComment">
							<li v-for="item in filmComment">
								<p>{{item.commentName}} 看过 {{item.updatedate}}</p>
								<p>{{item.commentContent}}</p>
							</li>
						</ul>
					</div>
				</div>
			</div>
		</div>
		<vfoot></vfoot>
	</div>
</template>

<script>
	import Vhead from "../public/VHead"
	import VFoot from "../public/VFoot"
	import Qs from 'qs'
	export default {
		data () {
		    return {
		    	filmJson : [],
		    	filmSomeJson : [],
		    	filmComment : [],
		    	showTalk : false,
		    	comentName : "",
		    	comentContent : ""
		    }
		},
		mounted ($route) {
	 		this.$nextTick(()=>{
	 			let _this = this;
	 			
	 			//获取电影的ID
	 			let filmId = {
  					"filmId":_this.$route.params.id,
  				}
	 			
	 			//获取电影的评论
	 			_this.$axios({
	  				method:"post",
	  				data:Qs.stringify(filmId),
	  				url:"../public/index.php/index/Filmcomment/findFilmCommentById",
	  			}).then(function(result){
					_this.filmComment = result.data;
	  			});
	 			
	 			//获取指定的电影
	 			_this.$axios({
	  				method:"post",
	  				data:Qs.stringify(filmId),
	  				url:"../public/index.php/index/Filmdetail/findFilmById",
	  			}).then(function(result){
	  				result.data["filmImgUrl"] = '../public/uploads/'+result.data["filmImgUrl"] ;
					_this.filmJson = result.data;
	  			});
	  			
	  			//获取指定数量的电影
	  			let filmData ={
	 				"number" : "4"
	 			}
	  			_this.$axios({
                    method: "post",
                    data: Qs.stringify(filmData),
                    url: "../public/index.php/index/Filmdetail/findFilm",
                })
                .then(function(res) {
                	for(var i = 0;i<res.data.length;i++){
  						res.data[i]["imgUrl"] = '../public/uploads/'+res.data[i]["filmImgUrl"] ;
  					}
                	_this.filmSomeJson = res.data;
                	
               	})
                .catch(function(err) {
                   console.log(err);
               	});
	  			
	 		})
 		},
		components:{
			"vhead" : Vhead,
			"vfoot" : VFoot,
		},
		filters : {
			getFilmHref : function(val){
				return "/filmDetail/"+val;
			}
		},
		methods : {
			changeTalk : function(){
				this.showTalk = !this.showTalk;
			},
			saveTalks:function(){
		   		if(this.comentName == ""){
		   			alert("昵称不能为空！");
		   		}else if(this.comentContent == ""){
		   			alert("内容不能为空！");
		   		}else{
		   			this.showTalk=!this.showTalk;
		   			$.ajax({
		  				type:"POST",
		  				url:"../public/index.php/index/Filmcomment/saveFilmComment",
		  				async:true,
		  				dataType:"json",
		  				data:{
		  					"filmId":this.$route.params.id,
		  					"commentName":this.comentName,
		  					"commentContent":this.comentContent
		  				},
		  				success:function(result){
						 	if(result){
						 		var html = '<li style="padding: 5px 0px;border-bottom: 1px solid #dfdfdf;"><p>'+
											result.commentName +
											'看过'+ 
											result.updatedate +
											'</p><p>'+
											result.commentContent +
											'</p></li>';
			  					$('#filmComment').prepend(html);
						 	}
		  				}
		  			});
		  			this.comentName="";
					this.comentContent="";
		   		}
		   	},
		}
	}
</script>

<style scoped>
	
	.listFilm li{
		line-height: 30px;
	}
	.film-like img{
		width: 100%;
	}
	.film-comment{
	}
	.film-comment li{
		padding: 5px 0px;
		border-bottom: 1px solid #dfdfdf;
	}
	.save-comment{
		background: #fae9da;
		text-align: center;
		line-height: 30px;
		color: #C65E24;
		cursor: pointer;
	}
	.glyphicon-pencil:before{
		padding-left: 10px;
	}
</style>